<template>
  <div id="body_div">
    <headerdiv />
    <div id="register_imgs">
      <div class="register">
        <div class="register-title">请进行注册</div>
        <el-form
          label-position="left"
          label-width="80px"
          :model="formLabelAlign"
          label-suffix=":"
        >
          <el-form-item label="用户名" class="color">
            <el-input
              v-model="formLabelAlign.username"
              name="username"
              placeholder="请输入你的用户名"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" class="color">
            <el-input
              v-model="formLabelAlign.password"
              name="password"
              type="password"
              placeholder="请输入你的密码"
            ></el-input>
          </el-form-item>
          <!-- 作业 -->
          <el-form-item label="邮箱" class="color" name="email">
            <el-input
              v-model="formLabelAlign.email"
              type="text"
              placeholder="请输入你邮箱"
            ></el-input>
          </el-form-item>
          <div class="register-button">
            <el-button type="primary" @click="register" class="btn">注册</el-button>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import { userRight } from "../network/index";
export default {
  name: "register",
  data() {
    return {
      formLabelAlign: {
        username: "",
        password: "",
        email: "",
      },
    };
  },
  methods: {
    register() {
      if (
        this.$data.formLabelAlign.username == "" ||
        this.$data.formLabelAlign.password == "" ||
        this.$data.formLabelAlign.email == ""
      ) {
        alert("对不起,请确认输入情况.....");
      } else {
        userRight(this.formLabelAlign).then((res) => {
          if (res != null) {
            this.$message({
              message: "恭喜你,注册成功!请去你的邮箱激活!",
              type: "success",
            });
            // console.log(res.data);
            // 跳转到登录页面
            this.$router.push("login");
          } else {
            console.log("出现错误...");
          }
        });
      }
    },
  },
  components: {
    headerdiv: () => import(/** */ "../components/header"),
  },
};
</script>
<style>
#register_imgs {
  width: 100%;
  background-image: url("../../static/imgs/index/bj000.jpg");
  height: 100vh;
  background-size: cover;
  background-position: 0px -250px;
  background-repeat: no-repeat;
  margin-bottom: 15px;
  margin-top: 10px;
}
.register {
  width: 500px;
  height: 350px;
  background-color: rgba(255, 255, 255, 0.3);
  /* 居中 */
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 10px;
  /* 左右留下空余 */
  padding: 0 50px;
}
.register-title {
  font-size: 35px;
  text-align: center;
  line-height: 100px;
  color: black;
  font-weight: bold;
}
.register-button {
  line-height: 50px;
  text-align: center;
}
.color .el-form-item__label {
  color: black;
}
.btn{
  width: 6vw;
  height: 5vh;
}
</style>